<template>
  <!--  发货区域，支持选择快递-->
  <a-modal
    width='60%'
    :title='title'
    :visible='visible'
    @cancel='handleCancel'
    :confirmLoading='confirmLoading'
  >
    <template slot='footer'>
      <a-button @click='handleCancel'>取消</a-button>
      <a-button v-if='!disableSubmit' :loading='confirmLoading' type='primary' @click='handleOk'>确认</a-button>
    </template>
    <a-divider style="font-weight: 600;margin-top: 20px;" orientation="left">基础信息</a-divider>
    <a-form :form='form'>
      <a-row :gutter='24'>
        <!--        承运方式-->
        <a-col :md='12' :sm='24'>
          <a-form-item
            :labelCol='labelCol'
            :wrapperCol='wrapperCol'
            label='订单编码'

          >
            <a-input placeholder='请输入订单编码' :disabled='disableSubmit' v-decorator="['orderCode']"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md='12' :sm='24'>
          <a-form-item
            :labelCol='labelCol'
            :wrapperCol='wrapperCol'
            label='下单时间'>
            <a-date-picker style='width:100%' format='YYYY-MM-DD' valueFormat='YYYY-MM-DD'
                           :disabled='disableSubmit' v-decorator="['orderTime', validatorRules.startTime]" />
          </a-form-item>
        </a-col>
        <a-col :md='12' :sm='24'>
          <a-form-item
            :labelCol='labelCol'
            :wrapperCol='wrapperCol'
            label='商品层级'
            >
            <j-tree-select
              v-decorator="['productLevelCode',{rules:[{required: true, message: '请选择商品层级!'}]}]"
              placeholder='请选择商品层级'
              ref='productLevelCode'
              data-type='product_type'
              :disabled='disableSubmit'
              @change='change'
            />
          </a-form-item>
        </a-col>
        <a-col :md='12' :sm='24'>
          <a-form-item
            :labelCol='labelCol'
            :wrapperCol='wrapperCol'
            label='商品名称'
          >
            <a-input-search placeholder='请选择商品' v-decorator="['productName',validatorRules.productCode]"
                            readOnly :disabled='disableSubmit' enter-button @search="productSearch('product')" />
            <a-input type='hidden'
                     v-decorator="['productCode', {}]"
            />
          </a-form-item>
        </a-col>


        <a-col :md='12' :sm='24'>
          <a-form-item
            :labelCol='labelCol'
            :wrapperCol='wrapperCol'
            label='客户名称'
          >
            <a-input-search placeholder='请选择客户名称' v-decorator="['custName',validatorRules.custName]"
                            readOnly :disabled='disableSubmit' enter-button @search="custSearch('custname')" />
            <a-input type='hidden'
                     v-decorator="['custCode', {}]"
            />
          </a-form-item>
        </a-col>
        <a-col :md='12' :sm='24'>
          <a-form-item
            :labelCol='labelCol'
            :wrapperCol='wrapperCol'
            label='预算规则编码'

          >
            <a-input placeholder='请输入预算规则编码' :disabled='disableSubmit' v-decorator="['ruleCode']"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md='12' :sm='24'>
          <a-form-item
            :labelCol='labelCol'
            :wrapperCol='wrapperCol'
            label='下单金额'

          >
            <a-input placeholder='请输入下单金额' :disabled='disableSubmit' v-decorator="['orderAmount']"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md='12' :sm='24'>
          <a-form-item
            :labelCol='labelCol'
            :wrapperCol='wrapperCol'
            label='随车带走金额'

          >
            <a-input placeholder='请输入随车带走金额' :disabled='disableSubmit' v-decorator="['giftAmount']"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <proChose ref='prochoose' @okbro='okbropro' v-bind='modalProps'></proChose>
  </a-modal>
</template>

<script>
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import { getAction, postAction } from '@/api/manage'
import proChose from '@comp/cn-components/ProChose'
import { pick } from 'lodash'

export default {
  name: 'newOrderFee',
  description: '预算订单详情',
  components: {
    proChose,
    JTreeSelect
  },
  data() {
    return {
      name: '',
      disableSubmit: false,
      title: '',
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      url: {
        // kuaidi: window._CONFIG['domianOrderURL'] + '/cnDictionaryTypeController/getDictionaryTypeList'
        sendOrder: window._CONFIG['domianTpmURL'] + '/budget/tpmBudgetFeeOrder/saveOrUpdateEntity'
      },
      validatorRules: {
        productCode: {
          rules: [
            { required: true, message: '请选择商品' }
          ]
        },
        custCode: {
          rules: [
            { required: true, message: '请输入客户名称' }
          ]
        },

        startTime: {
          rules: [
            { required: true, message: '请选择时间' }
          ]
        }

      },
      modal: undefined,
      productLevelName:''

    }
  },

  methods: {
    change(v,i){
      console.log(v,i)
      this.productLevelName =  i
    },
    priceCh(e) {
      console.log(e.target.value)
      let num = e.target.value
      if (num < 0) {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            price: 0
          })
        })
      }
    },
    custSearch(status) {
      this.$refs.prochoose.rowKey = 'custCode'
      let formconfig = [
        {
          key: 'custCode',
          label: '客户编码'
        },
        {
          key: 'custName',
          label: '客户名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '客户编码',
            align: 'center',
            dataIndex: 'custCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '客户名称',
            align: 'center',
            dataIndex: 'custName',
            width: 120,
            ellipsis: true
          }
        ],

        list: window._CONFIG['domianURL'] + '/customerController/getPageList',
        multiple: false,
        columW: 11
      }
      this.name = '客户'
      this.$refs.prochoose.edit(formconfig, tableconfig, status)
    },
    productSearch(status) {
      this.$refs.prochoose.rowKey = 'goodsCode'
      let formconfig = [
        {
          key: 'goodsCode',
          label: '商品编码'
        },
        {
          key: 'goodsName',
          label: '商品名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '商品编码',
            align: 'center',
            dataIndex: 'goodsCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '商品名称',
            align: 'center',
            dataIndex: 'goodsName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/goods/cnGoods/findPageList',
        multiple: false,
        columW: 11
      }
      this.name = '商品'
      this.$refs.prochoose.edit(formconfig, tableconfig, status)
    },
    okbropro(record, status) {
      let res = record[0]
      if (status == 'product') {
        this.form.setFieldsValue({
          productName: res.goodsName,
          productCode: res.goodsCode
        })
      } else {
        this.form.setFieldsValue(pick(res, 'custCode', 'custName'))
      }
    },
    add(record, status) {
      this.edit(record, status)
    },
    edit(iscord) {
      console.log(iscord)
      this.form.resetFields()
      this.modal = undefined
      this.visible = true
      if (typeof iscord !== 'undefined') {

        this.modal = Object.assign({}, iscord)
        this.modal.balance = iscord.orderCode
        this.modal.startTime = iscord.orderTime
        this.modal.ruleCode = iscord.ruleCode
        this.$nextTick(() => {
          this.form.setFieldsValue({ ...this.modal })
        })
      }
    },
    handleOk() {
      let _vm = this
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          this.modal == undefined ? console.log('新增提交') : values.id = this.modal.id
          values.productLevelName = this.productLevelName
          postAction(this.url.sendOrder, values).then(res => {
            if (!res.success) {
              this.$message.error(res.message)
            } else {
              this.$emit('ok')
            }
            _vm.confirmLoading = false
          })
        }
      })
    },
    handleCancel() {
      this.visible = false
      this.confirmLoading = false
    },
    close() {
      this.handleCancel()
    }
  },
  computed: {
    modalProps() {
      return Object.assign({}, {
        name: this.name
      })
    }
  }
}
</script>

<style scoped>
.grayLine {
  color: black;
  font-weight: 700;
  border-bottom: 1px solid #c1c1c1;
  font-style: 24px;
  line-height: 36px;
  margin-bottom: 15px;
}

/deep/ .ant-modal-body {
  padding: 10px 20px 0 10px !important;
}
</style>